DM-8005 Create phase folding parameter setting panel and move the phase folding algorithm to the client side #220

cwang2016 · 2016-11-03T23:36:14Z

For phase folding parameter setting panel:

Move phase folding algorithm to the client side to create phase folded table.
create phase folding parameter setting panel (LcPhaseFoldingPopup.jsx)
adapt a React slider to create slider component (RangeSlider.jsx) for setting the period, connect the slider to FieldGroup components.
the existing phase folded table replaces the existing one when the complete button on the parameter setting panel is clicked.

Make client-only TableMode to work like one from the server (done by Loi),

table is dispatched into flux creating similar table actions as server-supported table.
sorting, filtering, and selected columns.
filter by selected rows via 'ROWID'
save/download table
convert TableCntlr to new api

Note:

the xyplot is made to show the data in 2 phase cycle.
'period' value is set by either changing the slider or entering the data in phase folding, the valid period range and step for the slider is calculated as
period minimum: 1 sec, i.e 1/86400 day.
period maximum: (time_max - time_min) * 2, where time_max and time_min are respectively the maximum and minimum mjd from the raw table.
step: (period maximum - period minimum) / (total data points * N), where N = 10.
If a period value bigger than the maximum value on the slider is entered into the text field, then the maximum value on the slider is updated accordingly.

Some issues:

the xyplot area only shows the graph the first time the phase folding panel OK button is clicked. After that, only the phase folded table gets updated, and the xyplot area shows the spinning sign.
the cell with 'null' string as seen from the raw table is shown as blank in the phase folded table due to no null string information and processing included in the uploaded file containing the phase folded table (ipac format) and at the server side currently.

…se folding algorithm to the client side. Make client-only TableMode works like one from the server.

cwang2016 · 2016-11-03T23:50:25Z

Test:

localhost:8080/firefly/lc.html
load raw table 'lc_raw.tbl' -> click 'search'
select 'upload/phase folding' tab and click 'phase folding' button (the phase folding panel is shown)
play with the slider to set the period value and set other parameters
click 'phase folding table' to update the phase folded table which has 'phase' column added and xyplot with about 2 phase cycles is show.

robyww · 2016-11-04T18:23:23Z

UI Note: I think the slider CSS needs a little work we should talk about how it should look. Maybe that should not hold up this ticket but in the next week or so You, I and Loi could talk about the look. For example I played with making the slide a triangle using techniques from: https://css-tricks.com/snippets/css/css-triangle/

robyww

Look goods. Two concerns are break up LcPhaseFoldingPopup.jsx and work on the UI look of the slider.

It will look really good when we get it hooked up to a chart.

robyww · 2016-11-04T18:38:50Z

src/firefly/js/templates/lightcurve/LcPhaseFoldingPopup.jsx

@@ -0,0 +1,623 @@
+/*


I think it would be better to break out some of the non-UI function into a separate file. A large percent of this file is not UI. It will be easier to write test.

We are not always consistent about this but I think it is better to try to keep mostly only jsx in a jsx file.

good approach. I am going to break it.

robyww · 2016-11-04T18:48:59Z

src/firefly/js/templates/lightcurve/LcPhaseFoldingPopup.jsx

+                                  fieldKey: fKeyDef.period.fkey,
+                                  value: `${min}`,
+                                  label: `${fKeyDef.period.label}:`,
+                                  validator: periodValidator.bind(null, 0.0, Number.MAX_VALUE, 8, periodErr),


why does range slider need a validator? I would think it only allows valid values.

This is mainly for checking the value entered in the text field, and the value is applied to the slider itself.

robyww · 2016-11-04T18:53:17Z

src/firefly/js/ui/RangeSlider.jsx

+            </div>
+        );
+    }
+}


I like the flexibility of this component.

ejoliet · 2016-11-04T19:04:45Z

Thanks.
It's a good start and good demo of client new interaction!
I think there is still room to improve the slider adding 'ticks' and labels for example, and also in the choice of the default minimum and maximum values, not sure about them. Should be validated.
Adding the chart on the right-hand side will complete the feature but it will need to be as clear and useful as the previous version of regular xy plot.
Overall is fine for a demo of client capability but the feature will need to go to a round of reviews to get it finally released.
Review done.

tgoldina · 2016-11-04T21:38:45Z

Please, check http://localhost:8080/firefly catalog search. The xyplot does not show on the first catalog search, no matter IRSA or LSST. It shows on the subsequent searches. (dev branch does not exhibit this behavior).

This is my fault. I allow TBL_RESULTS_ACTIVE to be dispatched sooner, so that a tab will switch to the latest search immediately instead of waiting for table data to be completely loaded. I've reverted the code. We can talk about it when there is a need to implement such feature.

1. synchronizing the default chart viewer with the active table is moved to a separate saga, this synchronization happens on CHART_ADD and on TBL_RESULTS_ACTIVE; 2. when a chart is replaced, 'mounted' attribute should be that of the previous chart. 3. the chart area did not show in Firefly Viewer (on the first catalog search).

… layout update.

DM-8005 Create phase folding parameter setting panel and move the pha…

457239b

…se folding algorithm to the client side. Make client-only TableMode works like one from the server.

robyww approved these changes Nov 4, 2016

View reviewed changes

Cindy Wang and others added 3 commits November 4, 2016 17:40

break the RangeSlider smart and UI portion as suggested by Trey.

6c894b3

Move adding default chart to a separate saga to make sure it triggers…

5d40c1c

… layout update.

cwang2016 merged commit 9df077a into dev Nov 7, 2016

cwang2016 deleted the DM-8005-PhaseFolding branch November 8, 2016 01:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

DM-8005 Create phase folding parameter setting panel and move the phase folding algorithm to the client side #220

DM-8005 Create phase folding parameter setting panel and move the phase folding algorithm to the client side #220

Uh oh!

cwang2016 commented Nov 3, 2016

Uh oh!

cwang2016 commented Nov 3, 2016

Uh oh!

robyww commented Nov 4, 2016

Uh oh!

robyww left a comment

Uh oh!

robyww Nov 4, 2016

Uh oh!

cwang2016 Nov 5, 2016

Uh oh!

robyww Nov 4, 2016

Uh oh!

cwang2016 Nov 5, 2016

Uh oh!

robyww Nov 4, 2016

Uh oh!

ejoliet commented Nov 4, 2016

Uh oh!

tgoldina commented Nov 4, 2016 •

edited by loitly

Loading

Uh oh!

Uh oh!

DM-8005 Create phase folding parameter setting panel and move the phase folding algorithm to the client side #220

DM-8005 Create phase folding parameter setting panel and move the phase folding algorithm to the client side #220

Uh oh!

Conversation

cwang2016 commented Nov 3, 2016

Uh oh!

cwang2016 commented Nov 3, 2016

Uh oh!

robyww commented Nov 4, 2016

Uh oh!

robyww left a comment

Choose a reason for hiding this comment

Uh oh!

robyww Nov 4, 2016

Choose a reason for hiding this comment

Uh oh!

cwang2016 Nov 5, 2016

Choose a reason for hiding this comment

Uh oh!

robyww Nov 4, 2016

Choose a reason for hiding this comment

Uh oh!

cwang2016 Nov 5, 2016

Choose a reason for hiding this comment

Uh oh!

robyww Nov 4, 2016

Choose a reason for hiding this comment

Uh oh!

ejoliet commented Nov 4, 2016

Uh oh!

tgoldina commented Nov 4, 2016 • edited by loitly Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

tgoldina commented Nov 4, 2016 •

edited by loitly

Loading